<template>
  <div class="main-body">
    <div class="breadcrumb">
      <el-breadcrumb separator=">">
        <i class="bread-ico">
          <icon name="wpexplorer"></icon>
        </i>
        <el-breadcrumb-item :to="{ path: '/' }">
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item  :to="{path:'/analyze'}" >转化分析</el-breadcrumb-item>
        <el-breadcrumb-item  v-if="routeName === 'analyze'" >列表</el-breadcrumb-item>
        <el-breadcrumb-item  v-if="routeName === 'analyzeChannel'" >详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="btn-group">
      <el-button @click="showFiltrate = !showFiltrate" class="filter-item" size="small">查询条件</el-button>
      <el-button class="filter-item" @click="emptyQuery" v-show="showEmptyButton" size="small" >清空查询条件</el-button>
    </div>
    <div class="tabpane-container" ref="tabpaneContainer"  v-loading.body="loading" element-loading-text="拼命加载中" element-loading-customClass="partloading">
      <el-tabs  v-model="activeName" @tab-click="tabHandleClick">
        <el-tab-pane label="列表" name="analyze" >
          <div v-if="show_team_name" class="table-header">
            <div v-if="show_team_name" class="team_name">团队名称: {{ team_name ? team_name : '全部团队'}}</div>
            <div v-if="show_team_name" class="team_name">时间范围: {{ time.start_time }} 至 {{ time.end_time}}</div>
          </div>

          <el-table border :data="tableData" stripe  :empty-text="text"  :max-height = tableHeight >
            <el-table-column
              :formatter = "formateSourceName"
              prop="source_name"
              label="客户来源"
              fixed="left"
              :min-width="140">
            </el-table-column>
            <!--<el-table-column-->
              <!--prop="channel_name"-->
              <!--label="渠道"-->
              <!--:min-width="140">-->
            <!--</el-table-column>-->
            <el-table-column
              prop="total"
              label="客户数"
              fixed="left"
              width="100">
            </el-table-column>
            <el-table-column
              :label="tableTitle.month_1"
              width="150">
              <template scope="scope">
                <div class="blue">
                  <span>新增成交:{{ scope.row.add_1_total ? scope.row.add_1_total : 0}}</span>
                </div>
                <div  class="success">
                  <span>成交数:{{ scope.row.month_1_total ? scope.row.month_1_total : 0}}</span>
                </div>
                <div class="danger">
                  <span>成交比例:{{ scope.row.month_1 ? scope.row.month_1 : 0}}</span>
                  <span  >%</span>
                </div>

              </template>
            </el-table-column>
            <el-table-column
              :label="tableTitle.month_2"
              width="150">
              <template scope="scope">
                <div v-if="columnFlag.flag_2">
                  <div class="blue">
                    <span>新增成交:{{ scope.row.add_2_total ? scope.row.add_2_total : 0}}</span>
                  </div>
                  <div  class="success">
                    <span>成交数:{{ scope.row.month_2_total ? scope.row.month_2_total : 0}}</span>
                  </div>
                  <div class="danger">
                    <span>成交比例:{{ scope.row.month_2 ? scope.row.month_2 : 0}}</span>
                    <span  >%</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="tableTitle.month_3"
              width="150">
              <template scope="scope">
                <div v-if="columnFlag.flag_3">
                  <div class="blue">
                    <span>新增成交:{{ scope.row.add_3_total ? scope.row.add_3_total : 0}}</span>
                  </div>
                  <div  class="success">
                    <span>成交数:{{ scope.row.month_3_total ? scope.row.month_3_total : 0}}</span>
                  </div>
                  <div class="danger">
                    <span>成交比例:{{ scope.row.month_3 ? scope.row.month_3 : 0 }}</span>
                    <span  >%</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="tableTitle.month_4"
              width="150">
              <template scope="scope">
                <div v-if="columnFlag.flag_4">
                  <div class="blue">
                    <span>新增成交:{{ scope.row.add_4_total ? scope.row.add_4_total : 0}}</span>
                  </div>
                  <div  class="success">
                    <span>成交数:{{ scope.row.month_4_total ? scope.row.month_4_total : 0}}</span>
                  </div>
                  <div class="danger">
                    <span>成交比例:{{ scope.row.month_4 ? scope.row.month_4 : 0}}</span>
                    <span  >%</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="tableTitle.month_5"
              width="150">
              <template scope="scope">
                <div v-if="columnFlag.flag_5">
                  <div class="blue">
                    <span>新增成交:{{ scope.row.add_5_total ? scope.row.add_5_total : 0}}</span>
                  </div>
                  <div  class="success">
                    <span>成交数:{{ scope.row.month_5_total ? scope.row.month_5_total : 0}}</span>
                  </div>
                  <div class="danger">
                    <span>成交比例:{{ scope.row.month_5 ? scope.row.month_5 : 0}}</span>
                    <span  >%</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="tableTitle.month_6"
              width="150">
              <template scope="scope">
                <div v-if="columnFlag.flag_6">
                  <div class="blue">
                    <span>新增成交:{{ scope.row.add_6_total ? scope.row.add_6_total : 0}}</span>
                  </div>
                  <div  class="success">
                    <span>成交数:{{ scope.row.month_6_total ? scope.row.month_6_total : 0}}</span>
                  </div>
                  <div class="danger">
                    <span>成交比例:{{ scope.row.month_6 ? scope.row.month_6 : 0}}</span>
                    <span  >%</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="70">
              <template scope="scope">
                <el-button v-if="scope.row.source_id" @click.native.prevent="view(scope)" type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane v-if="routeName === 'analyzeChannel'"   label="详情" name="analyzeChannel">
          <AnalyzeChannel v-if="routeName === 'analyzeChannel'"  :tableHeight="tableHeight"></AnalyzeChannel>
        </el-tab-pane>

      </el-tabs>

    </div>
    <transition enter-active-class="bounceInRight" leave-active-class="bounceOutRight"
                v-on:after-leave="afterLeave">
      <AnalyzeFiltrate v-loading.body="exportLoding" class="animated" v-if="showFiltrate"
                                    @search="filtrateSubmit" @cancel="filtrateCancel"></AnalyzeFiltrate>
    </transition>
  </div>
</template>

<style lang="scss">
  @import '../scss/index';

  .content-main {
    height: 0;
    position: relative;
    float: left;
    min-height: 100%;
    width: 85%;
  }


  .bread-ico {
    float: left;
    margin-right: 8px;
    margin-top: -8px;
    width: 30px;

    .fa-icon {
      width: 100%;
      height: 100%;
    }
  }

  .team_name{
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    display: inline-block;
    margin-right: 1rem;
  }


  .tabpane-container .el-pagination{
    padding:0 0
  }

  .success{
    color: #13CE66;
  }

  .danger{
    color: #FF4949;
  }

  .blue{
    color: #20A0FF;
  }

</style>

<script>

  import Header from 'components/AdminHeader'
  import LeftSideBar from 'components/LeftSideBar'
  import {mapState, mapActions} from 'vuex'
  import {
    Breadcrumb, BreadcrumbItem,
    Tabs, TabPane, Button, Table,
    TableColumn,Tag
  } from 'element-ui'
  //  import Config from '../config/common'
  import Icon from 'vue-awesome/components/Icon.vue'
  import 'vue-awesome/icons/wpexplorer'
  import AnalyzeFiltrate from 'components/AnalyzeFiltrate'
  import AnalyzeChannel from 'components/AnalyzeChannel'
  //  import Q from 'q'
  //  import axios from 'axios'
  var dateFormat = require('dateformat')
  import MainPage from '../views/MainPage'

  export default {
    data () {
      return {
        docHeight: window.innerHeight + 'px',
        loading: false,
        activeName: 'analyze',
        exportLoding: false,
        showFiltrate: false,
        tableHeight: 0,
        tableData: [],
        tableTitle:[],
        columnFlag:[],
        emptyCondition:{
          date: new Date(),
          team_id: '',
          source_ids: [],
          channel_ids: []
        },
        text: '请点击查询条件',
        team_name:"",
        showEmptyButton: true,
        show_team_name:false,
        time: []
      }
    },


    methods: {
      initialize () {
        this.loaded()
        // const windowHeight = window.innerHeight
        // const offsetTop = this.$refs['tabpaneContainer'].offsetTop
        // this.tableHeight = (windowHeight - offsetTop - 120 )
//        this.emptyCondition = this.condition
      },

      formateSourceName(row,column){
        return row.source_name ? row.source_name : '未知来源'
      },

      afterLeave () {
        console.log('afterLeave')
      },
      loaded () {
        this.$nextTick(() => {
          const windowHeight = window.innerHeight
          const offsetTop = this.$refs['tabpaneContainer'].offsetTop
          this.tableHeight = (windowHeight - offsetTop - 120 )
        })
      },
      changeLoading (loading) {
        this.loading = loading
        console.log('changeLoading', loading)
      },

      tabHandleClick(tab){
        console.log(tab.name)
        if (tab.name === this.routeName) return
//
////        this.loading = true
        var params = tab.$el.getAttribute('params')
        if (params) {
          if (typeof params === 'string') {
            params = JSON.parse(params)
          }
        } else {
          params = {}
        }
        setTimeout(() => {
          this.$router.replace({ name: tab.name, params: params })
        }, 100)
      },

      view ($scope) {
        this.$router.push({path: '/analyzeChannel/'
        + $scope.row.source_id + '/'
        + $scope.row.team_id + '/'
        + dateFormat(this.queryData.date, 'yyyy-mm-dd h:MM:ss')
        + '/1/'
        + (this.team_name ? this.team_name : '全部团队') + '/'
        + this.time.start_time + '/' + this.time.end_time})
//        this.accountTeamId = $scope.row.custom_id
        this.activeName = 'analyzeChannel'
      },

      filtrateSubmit(response){
        console.log(response.data.results.length)
        if(response.data.results.length < 1 || response.data.results.data.length < 1){
          this.text = '暂无数据'
          this.tableData = []
          this.tableTitle = []
          this.team_name = ""
          this.show_team_name = false
          this.tiem = []
        }else{
          console.log(response.data.results)
          this.tableData = []
          this.tableTitle = []
          this.tableData = response.data.results.data
          this.tableTitle = response.data.results.tableTitle
          this.columnFlag = response.data.results.columnFlag
          this.show_team_name = true
          this.team_name = response.data.results.team_name
          this.time = response.data.results.time
        }

      },

      filtrateCancel(){
        this.showFiltrate = false
      },


      emptyQuery() {
        this.analyzeQueryData(this.emptyCondition)
        this.text = "请点击查询条件"
      },

      ...mapActions({
        updateMenuIndex: 'updateMenuIndex',
        analyzeQueryData: 'analyzeQueryData'
      })
    },
    mounted: function () {
      this.updateMenuIndex('analyze')
      this.activeName = this.routeName
      this.initialize()

    },
    watch: {
      routeName (routeName) {
        this.activeName = routeName
      },
      activeName(val){
        if(val !== 'analyze'){
          this.showEmptyButton = false
        }else{
          this.showEmptyButton = true
        }
      }
    },
    components: {
      ELHeader: Header,
      LeftSideBar: LeftSideBar,
      AnalyzeFiltrate: AnalyzeFiltrate,
      AnalyzeChannel: AnalyzeChannel,
      'el-breadcrumb': Breadcrumb,
      'el-breadcrumb-item': BreadcrumbItem,
      'icon': Icon,
      'el-tabs': Tabs,
      'el-tab-pane': TabPane,
      'el-table': Table,
      'el-table-column': TableColumn,
      'el-button': Button,
      'div': Tag,
      MainPage

    },
    computed: {
      ...mapState({
        site_id: state => state.auth.site_id,
        token: state => state.auth.user.token,
        route: state => state.route,
        path: state => state.route.path,
        routeName: state => state.route.name,
//        routeType: state => state.route.params.type,
        queryData: state => state.team.analyze_query_data
      })
    }
  }

</script>
